<!--
 * @Author: your name
 * @Date: 2021-12-27 23:48:14
 * @LastEditTime: 2021-12-31 21:32:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Sxun\briup-wisdom-order\src\views\Mine\address.vue
-->
<template>
  <div>
    <div class="navBar">
      <van-sticky>
        <van-nav-bar style="background-color:#409eff" left-arrow left-text=""   @click-left="onClickLeft">
          <template #title>
            <div style="color:white">
              我的收货地址
            </div>
          </template>
          <template #left>
            <div style="color:white">
              <van-icon name="arrow-left" color="white" />
              返回
            </div>
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    

    <!-- {{$route.query.userId}} -->
    <!-- {{this.$route.query.userId}} -->
    <div class="box">
    <div v-for="item in addressData" :key="item.id" >
      <div class="qb1">
        <div class="tubiao">
          <van-icon name="wap-home" />
        </div>
        <div class="ad1">
          <div class="p">
            <span style="font-size: 25px; padding-left: 15px; line-height: 2">
              {{ item.realname }}</span
            >
          </div>
          <div class="p">
            <span
              style="s
                font-size: 5px;
                padding-left: 10px;
                line-height: 3;
                color: #ccc;
              "
              >{{ item.telephone }}</span
            >
          </div>
        </div>
        <div class="p1">
          <span style="font-size: 5px">
            {{ item.province + item.city + item.area + item.address }}</span
          >
        </div>
        <div class="xiaobi">
          <van-icon name="edit" @click="onEditAddress(item)" />
          <van-icon name="delete-o" @click="deleteAddress(item.id)"/>
          </div>
          <!-- <van-button
                    @click="deleteAddress(item.id)"
                    round
                    block
                    type="info"
                    native-type="submit"
                    class="buttoncolor"
                    >删除</van-button
                  > -->
          <van-action-sheet v-model="show" :title="tital">
            <div class="content">
              <!-- <van-address-edit
                :area-list="areaList"
                :address-info="AddressInfo"
                show-set-default
                show-delete
                show-search-result
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
                @delete="onDelete"
                @change-detail="onChangeDetail(AddressInfo)"
              /> -->
              <van-form @submit="onSave">
                <!-- 姓名 -->
                <van-field
                  v-model="addressObj.realname"
                  name="姓名"
                  label="姓名"
                  placeholder="请输入收货人姓名"
                  :rules="[{ required: true, message: '请填写收货人姓名' }]"
                />
                <!-- 电话 -->
                <van-field
                  v-model="addressObj.telephone"
                  name="电话"
                  label="电话"
                  placeholder="请输入手机号码"
                  :rules="[{ pattern, message: '请输入正确的手机号' }]"
                />
                <!-- 省市区选择 -->
                <van-field
                  readonly
                  clickable
                  name="area"
                  :value="pcaAddress"
                  label="地区选择"
                  placeholder="点击选择省市区"
                  @click="showArea = true"
                  :rules="[{ required: true, message: '请选择省市区' }]"
                />
                <van-field
                  v-model="addressObj.address"
                  name="详细地址"
                  label="详细地址"
                  placeholder="请输入详细地址"
                  :rules="[{ required: true, message: '请输入详细地址' }]"
                />
                <div style="margin: 16px">
                  <van-button round block type="info" native-type="submit"
                    >提交</van-button
                  >
                  
                </div>
              </van-form>
              <van-popup v-model="showArea" position="bottom">
                <van-area
                  :area-list="areaList"
                  @confirm="onConfirm"
                  @cancel="showArea = false"
                />
              </van-popup>
            </div>
          </van-action-sheet>
        
      </div>
    </div>
    </div>
    <div class="xinzen" style="margin: 16px; margin-top: ;">
      <van-button
        
        color="#409eff"
        round
        block
        type="info"
        native-type="submit"
        @click="addButton"
      >
        新增地址
      </van-button>
    </div>
    
  </div>
</template>

<script>
  import {
    mapState,
    mapActions,
    mapGetters
  } from "vuex";
  import {
    areaList
  } from "@vant/area-data";
  import {
    get
  } from "@/http/axios";
  import {
    Dialog
  } from "vant";
  export default {
    data() {
      return {
        areaList,
        searchResult: [],
        tital: "",
        show: false,
        active: "",
        // userId: 81,
        chosenAddressId: "1",
        // 上传地址对象
        addressObj: {
          id: "",
          realname: "",
          telephone: "",
          province: "",
          city: "",
          area: "",
          address: "",
        },
        pcaAddress: "",
        // 省市区选择原始数据
        pcaList: [],
        // 省市区选择器显示控制
        showArea: false,
        pattern: /^1\d{10}$/,
      };
    },
    created() {
      // this.getUserInfo();
      // this.getaddressData();
      this.getAddressData(this.userInfo.id);
    },
    methods: {
      onConfirm(values) {
        this.pcaAddress = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join("-");
        this.pcaList = values;
        this.showArea = false;
      },
      async deleteAddress(addressId) {
        let res = await get("/app/address/deleteById?id=" + addressId);
        // console.log(res);
        if (res.data.message == "删除成功") {
          this.$notify({
            type: "success",
            message: res.data.message,
          });
          this.getAddressData(this.userInfo.id);
        } else {
          this.$notify({
            type: "danger",
            message: res.data.message,
          });
        }
      },
      addButton() {
        this.title = "新增地址";
        // 新增之前 对象置空
        this.addressObj = {};
        this.show = true;
      },
      onEditAddress(addressItem) {
        this.show = true;
        this.tital = "修改地址";
        // 拿到当前对象进行赋值
        this.addressObj = {
          ...addressItem
        };
        this.pcaAddress =
          addressItem.province + "-" + addressItem.city + "-" + addressItem.area;
      },
      onClickLeft() {
        this.$router.go(-1);
      },
      ...mapActions("address", ["getAddressData", "saveOrUpdateAddress"]),
      onSave() {
        if (this.title === "新增地址") {
          // id字段
          this.addressObj.userId = this.userInfo.id;
          // 将级联选择器的地址进行拆分 赋值给对应的字段
          this.addressObj.province = this.pcaList[0].name;
          this.addressObj.city = this.pcaList[1].name;
          this.addressObj.area = this.pcaList[2].name;
          this.saveOrUpdateAddress(this.addressObj).then((r) => {
            if (r.data.status == 200) {
              // 提示成功
              this.$toast.success('新增地址成功！');
              // 刷新数据
              this.getAddressData(this.userInfo.id);
              // 关闭actionsheet
              this.show = false;
            } else {
              // 提示异常
              this.$toast.success('新增地址失败！');
            }
          });
        } else {
          this.saveOrUpdateAddress(this.addressObj).then((r) => {
            if (r.data.status == 200) {
              this.$toast.success('编辑地址成功！');
              this.getAddressData(this.userInfo.id);
              this.show = false;
            } else {
              this.$toast.fail('编辑地址失败！');
            }
          });
        }
      },
      // getaddressData() {
      //   // console.log(curUserId)
      //   // console.log(this.$route.query.userId)
      //   let param = {
      //     userId: this.userId,
      //   };
      //   // this.userId = curUserId;
      //   this.getAddressData(param);
      // },
    },
    computed: {
      ...mapState("address", ["addressData"]),
      ...mapState("user", ["userInfo"]),
    },
  };
</script>

<style>
.box{
  overflow: auto;
  width: 100%;
  height:480px;
  /* border: 1px solid red; */
}
.qb1 {
  width: 90%;
  height: 90px;
  margin: 0 auto;
  /* border: 1px solid red; */
  margin-top: 15px;
  box-shadow: 0 0 6px 0 #ccc;
  border-radius: 15px;
}
.ad1 {
  width: 100%;
  height: 5px;
  /* border: 1px solid red; */
}
.p {
  display: block;
  float: left;
}
.p1 {
  /* position: absolute;
  top: 110px;
  left: 20%; */
  /* border: 1px solid red; */
  display: block;
  float: left;
  margin-left: 60px;
  width: 250px;
  
}
.tubiao {
  color: orange;
  font-size: 50px;
  float: left;
  height: 50px;
  width: 50px;
  /* border: 1px solid red; */
  line-height: 1.7;
  margin-left: 10px;
}
.xiaobi {
  font-size: 30px;
  /* border: 1px solid red; */
  margin-left: 90%;
}
.add {
  position: absolute;
  left: 50%;
}
.van-popup--bottom.van-popup--round {
  height: 350px;
}
.buttoncolor {
  margin-top: 10px;
  background-color: #ee0a24;
  border: 1px solid ee0a24;
}
.van-field__label{
  color: black;
}
.van-field__control{
  color: black;

}
</style>